<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <p>系统参数管理</p>
                <p style="color:red;font-size:12px;">警告: 系统参数请慎重修改, 在不确定的情况下修改可能会造成系统无法正常使用.</p>
            </div>
            <div class="item">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane v-for="item in groupOptions" :key="item.value" :label="item.label" :name="item.value">
                        <el-form ref="config" :model="config" label-width="260px">
                            <el-form-item v-for="item in menuList" :key="item.id" :label="item.key+'  '+item.name">
                                <el-input v-model="config[item.key]"></el-input>
                                <span>{{item.desc}}</span>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
            </el-card>
    </div>
</template>

<script>
import {
    getGroupMap,
    getParamsGlobal,
    putParamsGlobal
} from '@/api/config/setConfig'

export default {
    data(){
        return {
            configs:{},
            activeName: '1',
            configRules:{},
            // 基本设置表单
            config:{},
            menuList:[],
            groupOptions:[],
        }
    },
    created(){
        this.getGroupList()
        this.getList(parseInt(this.activeName))
    },
    methods: {
        handleClick() {
            this.getList(parseInt(this.activeName))
        },
        // 获取分组列表
        getGroupList(){
            getGroupMap().then(response => {
                for(let key in response.data.group_map){
                    // let obj = {value:key}
                    this.groupOptions.push({value:key,label:response.data.group_map[key]})
                }
            })
        },
        // 获取
        getList(type){
            let urlData = `?group_type=${type}`

            getParamsGlobal(urlData).then(response => {
                this.menuList = response.data;
                this.menuList.forEach(item => {
                    this.configs[item.key] = item.value;
                })
                // this.config)
                this.config = JSON.parse(JSON.stringify(this.configs))

            })
        },
        // 提交
        submitForm(){
            let form = {config:this.config};
            putParamsGlobal(form).then(response => {
                if (response.code === 200) {
                    this.getList(parseInt(this.activeName))
                    this.dialogFormVisible = false;
                    this.$notify({
                        type:'success',
                        message: '操作成功',
                        position: 'bottom-right',
                        showClose: false,
                        duration: 3000
                    });
                } else {
                    this.$message({
                        message: response.message,
                        type: 'error'
                    });
                }
            })
        }

    }
}
</script>

<style scoped>
[v-cloak] {
        display: none;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }

    .demo-form-inline {
        float: right;
    }

    /deep/ .el-card__header {
        padding-bottom: 0;
    }

    .el-form-item .el-form-item__content span {
        font-size: 12px;
        color: #838FA1;
    }
</style>
